<template>
    <el-menu
    default-active="true"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    >
    <el-menu-item index="1" ><i class="el-icon-s-order"></i>业务管理</el-menu-item>
    <el-submenu index="2" >
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>数据大屏</span>
          </template>
            <el-menu-item index="2-1">简约风格</el-menu-item>
            <el-menu-item index="2-2">科技风格</el-menu-item>
        </el-submenu>
    
    <el-tooltip 
        style="width: 6%;"
        class="item" 
        effect="light" 
        content="当前没有消息！" 
        placement="bottom-start">
    <el-menu-item index="3" disabled>消息中心</el-menu-item>
    </el-tooltip>
    <UserCenter :userName="userName" style="float: right;"></UserCenter>
    </el-menu>
    
</template>
<script>

import UserCenter from './UserCenter.vue';

export default {
    name: 'TopMenu',
    components: {
        UserCenter,
    },
    props: {
        userName: String,
    },
    data () {
        return {
            msg: ''
        };
    },
    mounted: function () {
        
    },
    methods: {
       handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if (key === "2-1") {
            this.$router.push({
              path: "/main/statistics",
            });
            this.$emit('mainMenuWidth',  true); 
        } else if (key === "1") {
            this.$router.push({
              path: "/main/TestExamFenYe",
              query: {
                mainMenuWidth: "100%",
              }
            });
            this.$emit('mainMenuWidth',  false); 
        } else if (key === "2-2") {
            this.$router.push({
              path: "/main/statisticsTechStyle",
            });
            this.$emit('mainMenuWidth',  true); 
        } 
      }
    }
};
</script>
<style scoped>
    
</style>